<template>
  <div>
    <van-row>
      <van-col span="24" id="hd">
        <van-nav-bar :border="false" title="选择品类品牌" left-text left-arrow @click-left="onClickLeft" />
      </van-col>
    </van-row>

    <van-row>
      <van-col span="6">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="item in list" :title="item.title" :key="item.id" />
        </van-sidebar>
      </van-col>

      <van-col span="18" style="margin-top:.5rem;overflow: auto;">
        <!-- <router-view :name="info" ></router-view> -->

        <ul>
          <li v-for="item in list1">
            {{item.goodsName}}
            {{item.goodsPrice}}
            <img
              style="width:1rem;height:1rem"
              :src="item.imageUrl"
            />
          </li>
        </ul>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "recysales",
  data() {
    return {
      activeKey: 0,
      indexList: [],
      list1: [],
      list: [
        {
          title: "复古包",
          id: 1
        },
        {
          title: "手提包",
          id: 2
        },
        {
          title: "手拿包",
          id: 3
        },
        {
          title: "单肩包",
          id: 7
        },
        {
          title: "斜挎包",
          id: 8
        },
        {
          title: "旅行包",
          id: 9
        }
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  mounted() {
    axios({
      method: "post",
      url: "http://47.102.221.184:8082/secluxury/type/brandGoodsList"
    })
      .then(data => {
        console.log(data.data);
        var a = data.data;
        a.map(item1 => {
          // console.log(item1)
          item1.goodsList.map(item2 => {
            // console.log(item2.goodsName)
            this.list1.push(item2);
          });
        });
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>


<style scoped>
#hd {
  height: 1rem;
  margin-top: 0.3rem;
}
#dh {
  float: left;
}
#sy {
  float: left;
  height: 13.77rem;
  width: 7.7rem;
  overflow: auto;
}
#sy .yd {
  text-align: center;
  overflow: auto;
}
</style>